﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
    <title>登录</title>
    <link rel="stylesheet" href="style/index.css">
</head>
<body class="login-bg">
    <div class="login-contain">
        <div class="login-header">
            <p>欢迎登录</p>
        </div>
        <div class="login-logo" align="center">
            <img src="image/7.jpeg" alt="">
            <p>划过美好生活</p>
        </div>
        <div class="form-group">
            <div class="form-item">
                <label for="phone">
                    <img src="image/phone.png" alt="">
                </label>
                <input id="phone" type="text" placeholder="请输入手机号">
            </div>
            <div class="form-item">
                <label for="code">
                    <img src="image/code.png" alt="">
                </label>
                <input id="code" type="text" placeholder="请输入验证码">
                <button id="codeMessage">发送验证码</button>
            </div>
        </div>
        <div class="button-group">
            <button class="login-btn">登录</button>
        </div>
        <div class="casual">
            <a href="index.html">随便逛逛</a>
        </div>
        <div class="order-login">
            <p>使用第三方账号登录</p>
            <ul>
                <li>
                    <a href="#">
                        <img src="image/QQ.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="image/WeChat.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/icon_xinlang.png" alt="">
                    </a>
                </li>
            </ul>
        </div>

    </div>
<script src="js/index.js"></script>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/core.util.js"></script>
<script type="text/javascript" src="js/mlayer.min.js"></script>

<script>
    $(function(){
        $(".login-btn").click(function(){
            var phone = $("#phone").val();
            var code = $("#code").val();
            if(CoreUtil.isEmpty(phone ,'小伙伴，手机号不能为空呦')) {
                return;
            }
            if(CoreUtil.isEmpty(code,'小伙伴，验证码不能为空呦')) {
                return;
            }
            CoreUtil.sendPost("/api/user/login", {"mobile":phone , "message" : code},function (res) {
                    localStorage.setItem("member",JSON.stringify(res.data));
                    localStorage.setExpire("accessToken",res.data.accessToken,res.data.expire)
                mlayer.msg({
                    content: '登录成功',
                    time: 1
                });
                setInterval(function(){
                    location.href = "index.html";
                }, 2000);


            });
        });

        var number = 60;
        $("#codeMessage").click(function() {
            var phone = $("#phone").val();
            if(CoreUtil.isEmpty(phone ,'小伙伴，手机号不能为空呦')) {
                return;
            }
            CoreUtil.sendPost("/api/user/sendSms", {"mobile": phone , "template" : "877505"}, function (res) {
                var id = setInterval(function(){
                    $("#codeMessage").html("倒计时" + number --);
                    if(number == 1) {
                        number = 60;
                        $("#codeMessage").removeAttr("disabled");
                        clearInterval(id);
                        $("#codeMessage").html("发送验证码");
                    }
                }, 1000);
                $(this).attr("disabled","disabled");
            });
        });
    })
</script>
</body>
</html>
